<template>
  <div style="position: relative">
    <header class="headerCtn flexJuconSpBeAliCenter">
      <div class="flexAliCenter">
        <div class="title flexAliCenter">
          按订单分拣<el-icon class="icon"><ArrowDown /></el-icon>
        </div>
        <el-input
          style="width: 236px"
          v-model="order"
          placeholder="搜索订单号、序号或商户信息"
          :prefix-icon="Search"
        />
      </div>
      <div class="right">
        更多筛选<el-icon class="icon"><ArrowRight /></el-icon>
      </div>
    </header>
    <div class="mainCtn" v-loading="loading">
      <div class="leftSide">
        <div v-for="(item, index) in filterList" :key="index" @click="sideClick(item, index)">
          <div :class="{ item: true, active: item.FBillNo === leftActive }">
            <p>{{ item.FBillNo }}</p>
            <p class="nameP" :title="item.FCustName">
              {{ item.FCustName }}
            </p>
          </div>
        </div>
      </div>
      <div class="rightContent">
        <div class="flexJuconSpBeAliCenter">
          <div></div>
          <el-Space>
            <el-Button type="primary" v-print="'#printAll'" @click="printFn(rightContent)"
              >打印全部标签</el-Button
            >
          </el-Space>
        </div>
        <div style="margin-top: 20px">
          <span>序号：{{ leftIndex }}</span> <el-divider direction="vertical" /><span
            >订单备注：无</span
          >
        </div>
        <div>分拣备注：无</div>
        <el-divider v-if="rightWeightedContent.length > 0">
          以下商品为计重商品，按称重后真实重量和客户结算
        </el-divider>
        <OrderSortChild :reset="reset" :goods-list="rightWeightedContent" />
        <el-divider v-if="rightUnweighedContent.length > 0">
          以下商品为不计重商品，如进行称重，会按称重数量和客户结算
        </el-divider>
        <OrderSortChild :reset="reset" :goods-list="rightUnweighedContent" />
      </div>
    </div>

    <PrintPage printId="printAll" :list="printInfo" />
    <ShowNumCard />
  </div>
</template>

<script lang="ts" setup>
import OrderSortChild from '@/components/orderSortChild.vue'
import PrintPage from '@/components/printPage.vue'
import { onMounted, ref, watch } from 'vue'
import { Search } from '@element-plus/icons-vue'
import ShowNumCard from '../components/showNumCard.vue'
import { queryGroupInfo } from '@/api/home'
import { dayjs } from 'element-plus'
import { groudSort } from '@/utils/commonFn'
const leftActive = ref('')
const leftIndex = ref(1)
const order = ref('')
const leftOrderList = ref<GoodsTypes.orderInfo[]>([])
const filterList = ref<GoodsTypes.orderInfo[]>([])
const printInfo = ref<any>([])
const rightContent = ref<GoodsTypes.goodsOrderInfo[]>([])
const loading = ref(false)
const rightWeightedContent = ref<
  {
    [x: string]: any
    data: GoodsTypes.goodsOrderInfo[]
  }[]
>([])
const rightUnweighedContent = ref<
  {
    [x: string]: any
    data: GoodsTypes.goodsOrderInfo[]
  }[]
>([])

onMounted(async () => {
  loading.value = true
  const res1: any = await queryGroupInfo({
    formid: 'SAL_SaleOrder',
    data: {
      FieldKeys: 'FBillNo,FCustId.FName',
      FilterString: [
        {
          Left: '(',
          FieldName: 'FDate',
          Compare: '=',
          Value: dayjs(sessionStorage.getItem('date')).format('YYYY-MM-DD'),
          Right: ')',
          Logic: 'AND'
        }
      ],
      OrderString: '',
      TopRowCount: 0,
      StartRow: 0,
      Limit: 2000,
      SubSystemId: '',
      formid: 'SAL_SaleOrder'
    }
  })
  let arr: GoodsTypes.orderInfo[] = []
  res1.forEach((item: string[]) => {
    let obj = {
      FBillNo: item[0],
      FCustName: item[1]
    }
    arr.push(obj)
  })
  leftOrderList.value = arr
  filterList.value = arr
  leftActive.value = arr[0]?.FBillNo
  if (arr[0]?.FBillNo) {
    reset(arr[0]?.FBillNo)
  }
  loading.value = false
})
watch(order, (val) => {
  filterList.value = leftOrderList.value.filter((item) => item.FBillNo.includes(val))
  leftActive.value = filterList.value[0]?.FBillNo
  sideClick(filterList.value[0], 1)
})
const reset = async (leftActive: string) => {
  const res1: any = await queryGroupInfo({
    formid: 'SAL_SaleOrder',
    data: {
      FieldKeys:
        'FBillNo,FDate,F_TEZV_pszt,FMaterialId,FMaterialName,F_TEZV_SFCZ,FQty,F_TEZV_JHSL,FCustId,FCustId.FName,FUnitID.FName,FID,FStockUnitID.FNumber,FPriceUnitId.FNumber,FSaleOrderEntry_FEntryID,FMaterialId.Fnumber,F_wlfz',
      FilterString: [
        {
          Left: '(',
          FieldName: 'FBillNo',
          Compare: '=',
          Value: leftActive,
          Right: ')',
          Logic: 'AND'
        },
        {
          Left: '(',
          FieldName: 'F_TEZV_sfzy',
          Compare: '=',
          Value: true,
          Right: ')',
          Logic: 'AND'
        }
      ],
      OrderString: '',
      TopRowCount: 0,
      StartRow: 0,
      Limit: 2000,
      SubSystemId: '',
      formid: 'SAL_SaleOrder'
    }
  })
  let arr: GoodsTypes.goodsOrderInfo[] = []
  res1.forEach((item: string[]) => {
    let obj = {
      FBillNo: item[0],
      FDate: item[1],
      F_TEZV_pszt: item[2],
      FMaterialId: item[3],
      FMaterialName: item[4],
      F_TEZV_SFCZ: item[5],
      FQty: item[6],
      F_TEZV_JHSL: item[7],
      FCustId: item[8],
      FCustName: item[9],
      FUnitName: item[10],
      FNumber: leftActive,
      FID: item[11],
      FStockUnitID: item[12],
      FPriceUnitId: item[13],
      FEntryID: item[14],
      FMaterialIdNum: item[15],
      F_wlfz: item[16]
    }
    arr.push(obj)
  })
  rightContent.value = arr
  const Weighted = arr.filter((i) => i.F_TEZV_SFCZ)
  const Unweighed = arr.filter((i) => !i.F_TEZV_SFCZ)
  rightWeightedContent.value = groudSort(Weighted, 'F_wlfz')
  rightUnweighedContent.value = groudSort(Unweighed, 'F_wlfz')
}
const sideClick = async (item: GoodsTypes.orderInfo, index: number) => {
  leftActive.value = item.FBillNo
  reset(item.FBillNo)
  leftIndex.value = index + 1
}
const printFn = (val: any) => {
  printInfo.value = val
  // const res1: any = await queryGroupInfo({
  //   formid: 'STK_Inventory',
  //   data: {
  //     FieldKeys: '',
  //     FilterString: [
  //       {
  //         Left: '(',
  //         FieldName: '',
  //         Compare: '=',
  //         Value: '',
  //         Right: ')',
  //         Logic: 'AND'
  //       }
  //     ],
  //     OrderString: '',
  //     TopRowCount: 0,
  //     StartRow: 0,
  //     Limit: 2000,
  //     SubSystemId: '',
  //     formid: 'SAL_SaleOrder'
  //   }
  // })
}
</script>

<style scoped lang="less">
.headerCtn {
  padding: 20px;
  .title {
    font-size: 24px;
    font-family:
      PingFangSC,
      PingFang SC;
    font-weight: 500;
    color: #000000;
    line-height: 33px;
    margin-right: 10px;
    .icon {
      font-size: 14px;
      color: #798294;
      margin-left: 8px;
    }
  }
  .right {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-family:
      PingFangSC,
      PingFang SC;
    font-weight: 500;
    color: #127ffe;
    line-height: 25px;
  }
}

.item {
  width: 184px;
  border-radius: 8px;
  margin-bottom: 12px;
  font-size: 18px;
  color: #8994b6;
  padding: 15px;
  cursor: default;
  .nameP {
    line-height: 20px;
    overflow: hidden; //超出盒子宽度内容，便溢出隐藏
    text-overflow: ellipsis; //用...省略号显示
    display: -webkit-box; //将对象作为弹性伸缩盒子模型显示
    -webkit-box-orient: vertical; //从上到下垂直排列子元素
    -webkit-line-clamp: 2; //显示的行数
  }
}
.active {
  background: linear-gradient(90deg, #4e86ff 0%, #4a60fe 100%);
  color: #fff;
}
</style>
